<template>
  <view @click="handleDetail" class="w-full p-4 bg-white rounded-md" >
    <view class="w-full grid grid-cols-4">
      <view class="w-full col-span-3 flex items-center justify-start">
        <image :src="data.workOrderStatus ? $getImageUrl(`icon/icon_gd_${data.workOrderStatus+1}.png`) : $getImageUrl(`icon/icon_gd_1.png`)" class="w-44rpx h-44rpx" />
        <view class="ml-1 text-15px font-bold flex items-center justify-start">{{ data.title }} <view v-if="data.readStatus === false" class="w-10rpx h-10rpx bg-red rounded-full ml-1"></view></view>
      </view>
      <view class="w-full col-span-1 text-right">
        {{ data.createTime }}
      </view>
    </view>
    <view class="w-full text-#7D8792 text-14px my-3">
      {{ data.templateContent }}
    </view>
    <view class="grid grid-cols-3 text-#B0B7C2 text-14px border-0 border-t-1 border-solid border-#F6F6F6 bg-white pt-2">
      <view @click="handleDetail" class="col-span-2 text-left">工单详情</view>
      <view class="col-span-1 text-right"><u-icon name="arrow-right" class="text-#DCDEE0"/></view>
    </view>
  </view>
</template>

<script setup lang="ts" name="OrdersItem">
import { onReady } from '@dcloudio/uni-app'
import { put_req } from '@/api/req'

const props = withDefaults(defineProps<{
  data?: any,
}>(), {
  data: () => {}, // 默认值为 null
})

const emits = defineEmits<{
  (event: 'change'): void
}>()

/**
 * 详情
 */
async function handleDetail() {
  if (!props.data?.workOrderId) {
    uni.showToast({
      title: '工单号不存在',
      icon: 'none',
    })
    return
  }
  const res = await put_req(`/app-api/system/workbenches/notify-message/update-read?ids=${[props.data?.id]}`)
  if (res.code === 0) {
    emits('change')
    await uni.navigateTo({
      url: `/pages/workbench/workOrder/detail?id=${props.data?.workOrderId}`,
    })
  }
}

</script>
<style scoped lang="scss">
.bg-red{
  background-color: #FF5C4B;
}
.bg-green{
  background-color: #16BF9D;
}
.bg-gray{
  background-color: #909399;
}
.bg-yellow{
  background-color: #FFB74B;
}
</style>
